<template>
  <div class="whatjifen">
    <header>
      <div class="more-left" @click="danji"><a><img src="../assets/img/m1.png" ></a></div>
      <div class="more-center">{{msg}}</div>
      <div class="more-right"><a></a></div>
    </header>
    <section class="help">
      <ul class="help-lis">
        <li>
          <router-link to='whatjifen'>
          <span>{{whatjifen}}</span>
          <img src="../assets/img/m7.png">
          </router-link>
        </li>
        <li>
         <router-link to='whatjifen'>
          <span>{{how}}</span>
          <img src="../assets/img/m7.png">
          </router-link>
        </li>
        <li>
         <router-link to='whatjifen'>
          <span>{{time}}</span>
          <img src="../assets/img/m7.png">
          </router-link>
        </li>
        <li>
         <router-link to='whatjifen'>
          <span>{{guize}}</span>
          <img src="../assets/img/m7.png">
          </router-link>
        </li>
        <li>
         <router-link to='whatjifen'>
          <span>{{stop}}</span>
          <img src="../assets/img/m7.png">
          </router-link>
        </li>
      </ul>
    </section>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: '积分帮助',
      whatjifen: '什么是积分',
      how: '如何获得积分',
      time: '积分有效期',
      guize: '减分规则',
      stop: '修改及终止'
    }
  },
  methods: {
    danji () {
      this.$router.go(-1)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='less'>
  @import '.././assets/css/reset.css';
  @import '.././assets/css/index.less';
  header{
    width:100%;
    .height(140);
    .font-size(40);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #28a85b;
    color:#ffffff;
    .more-right,.more-left{
      .width(160);
    }
    .more-center{
        flex: 1;
        text-align: center;
    }
    .more-left{
      a{
        display: block;
        img{
          .height(40);
          .padding(0,0,0,40);
          display: block;
        }
      }.px2rem(margin-right,38);
      .px2rem(margin-left,38);
    }
  }
  .help-lis{
      .px2rem(margin-top,15);
      .px2rem(margin-right,38);
      .px2rem(margin-left,38);
      >li{
        a{
          display: block;
        .height(100);
        display: flex;
        align-items: cneter;
        .border-bottom(1,solid,#e3e3e3);
        >span{
          flex: 1;
          .font-size(29);
          .line-height(100);
          color: #1b1b1b;
        }
        >img{
          height: 2em;
          .px2rem(padding-top,22);
        }
        }
      }
    }
</style>
